<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
		<meta name="author" content="www.frebsite.nl" />

		<title>jQuery.dotdotdot, advanced cross-browser ellipsis for multiple line content.</title>

		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.dotdotdot-1.5.9.min.js"></script>
		<script type="text/javascript" src="js/basis.js"></script>

		<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
		<script type="text/javascript" src="js/prettify.js"></script>

		<link type="text/css" media="all" rel="stylesheet" href="css/reset.css" />
		<link type="text/css" media="all" rel="stylesheet" href="css/style.css" />
		<link type="text/css" media="all" rel="stylesheet" href="css/layout.css" />
		<link type="text/css" media="all" rel="stylesheet" href="css/download.css" />

		<link type="text/css" media="all" rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" />
		<link type="text/css" rel="stylesheet" href="css/prettify.css" />

	</head>
	<body>
		<div id="header">
			<img src="img/header-bg.jpg" alt="dotdotdot" />
			<h1 class="on-top">
				<span>jQuery.dotdotdot...</span>
				<a href="download.php">Download
					<small>the latest version</small></a></h1>
			<a href="https://github.com/BeSite/jQuery.dotdotdot" target="_blank"><img src="img/forkme.png" alt="fork me on github" /></a>
		</div>

		<div id="content">

			<div id="intro">
				<h4 class="o">It turns this piece of overflowing text...</h4>
				<span class="arrow arrow-1 o"></span>
				<div class="box box-7 box-half">
					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
				</div>
				<h4 class="e">...Into this beauty!</h4>
				<span class="arrow arrow-2 e"></span>
				<div class="box box-7 box-half box-right ellipsis">
					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
				</div>

				<div class="clearer"></div>
			</div>
			<br />
			<p class="txt-1">See how it uses an ellipsis to indicate that there is more text than currently visible?<br />
				Isn't that awesome? It's like using <em>overflow: hidden;</em> But PRO-style!<br />
				<a href="#js-1" class="js">View javascript /&gt;</a>
				<span class="arrow arrow-6"></span></p>

			<h3>But wait, there's more...</h3>
			<p>Need that &quot;read more&quot;-link to always be visible and (duh) clickable?<br />
				Pas de probl&egrave;me, mon ami !</p>
			<div class="box box-3 ellipsis-a">
				Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
				<a href="#" onclick="javascript: alert('just a dummy link...'); return false;" title="read more" class="readmore">Read more &raquo;</a>
			</div>
			<p class="txt-2">See how it keeps the &quot;read more&quot;-link and puts it AFTER the ellipsis?<br />
				That's awesomeness to the max baby!<br />
				<a href="#js-2" class="js">View javascript /&gt;</a>
				<span class="arrow arrow-5"></span></p>


			<h3>Down with the elements.</h3>
			<p class="txt-3">Don't worry too much about your HTML markup,<br />
				the plugin knows its way around most elements.
				<span class="arrow arrow-3"></span>
				<span class="arrow arrow-4"></span></p>

			<div class="box box-7 box-half">
				<em>Lorem Ipsum</em> is simply dummy text of the <strong>printing and typesetting industry</strong>. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an <em>unknown printer</em> took a galley of type and scrambled it to make a type specimen book. <strong>It has survived not only five centuries</strong>, but also the leap into <strong>electronic typesetting</strong>, remaining essentially unchanged.
			</div>
			<div class="box box-7 box-half box-right ellipsis-e">
				<em>Lorem Ipsum</em> is simply dummy text of the <strong>printing and typesetting industry</strong>. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an <em>unknown printer</em> took a galley of type and scrambled it to make a type specimen book. <strong>It has survived not only five centuries</strong>, but also the leap into <strong>electronic typesetting</strong>, remaining essentially unchanged.
			</div>
			<div class="clearer"></div>
			<br />
			<p>Note that it's not recommended using elements with <code>display: block;</code> like <code>DIV</code> or <code>UL</code>.
				<a href="#js-3" class="js">View javascript /&gt;</a></p>

			<h3>So how about a fluid layout?</h3>
			<p class="txt-4">The box below will resize along with your window.<br />
				So go ahead and resize it, the ellipsis will update on the fly! Sweet!</p>
			<div class="box box-3 ellipsis-r">
				Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
			</div>
			<p class="txt"><a href="#js-4" class="js">View javascript /&gt;</a></p>

			<h3>Cool! Truncate to readable pathnames.</h3>
			<p class="txt-3">Putting an ellipsis after a long pathname makes it pretty unreadable,<br />
				unless you use dotdotdot.</p>
			<div class="box box-3 box-half">
				<div class="pathname">www.website.com/file.html</div>
				<div class="pathname">www.website.com/that/should/be/truncated/before/the/file.html</div>
			</div>
			<div class="box box-3 box-half box-right ellipsis-p">
				<div class="pathname">www.website.com/file.html</div>
				<div class="pathname">www.website.com/that/should/be/truncated/before/the/file.html</div>
			</div>
			<div class="clearer"></div>
			<p class="txt"><a href="#js-5" class="js">View javascript /&gt;</a></p>


			<h2>How to use the plugin</h2>
			<p>Include all nessesary .js-files inside the &lt;head&gt;-tag of the page.</p>
			<div class="code-txt">
<pre class="prettyprint lang-xhtml linenums">
&lt;head&gt;
	&lt;script src=&quot;jquery.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
	&lt;script src=&quot;jquery.dotdotdot.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
</pre>
			</div>
			<p>Create a DOM element and put some text and other HTML markup in this &quot;wrapper&quot;.</p>
			<div class="code-txt">
<pre class="prettyprint lang-xhtml linenums">
&lt;div id=&quot;wrapper&quot;&gt;
	&lt;p&gt;Lorem Ipsum is simply dummy text.&lt;/p&gt;
&lt;/div&gt;
</pre>
			</div>
			<p>Fire the plugin onDocumentReady using the wrapper-selector.</p>
			<div class="code-txt">
<pre class="prettyprint lang-js linenums">
$(document).ready(function() {
	$(&quot;#wrapper&quot;).dotdotdot({
		//	configuration goes here
	});
});
</pre>
			</div>

			<h2>Configuration options</h2>
			<p>The dotdotdot plugin uses a few options that can be passed in the configuration-object.<br />
				All options (showing default values):</p>
			<div class="code-txt">
<pre class="prettyprint lang-js linenums">
$(document).ready(function() {
	$(&quot;#wrapper&quot;).dotdotdot({
		/*	The text to add as ellipsis. */
		ellipsis	: '... ',

		/*	How to cut off the text/html: 'word'/'letter'/'children' */
		wrap		: 'word',

		/*	Wrap-option fallback to 'letter' for long words */
		fallbackToLetter: true,

		/*	jQuery-selector for the element to keep and put after the ellipsis. */
		after		: null,

		/*	Whether to update the ellipsis: true/'window' */
		watch		: false,
	
		/*	Optionally set a max-height, can be a number or function.
			If null, the height will be measured. */
		height		: null,

		/*	Deviation for the height-option. */
		tolerance	: 0,

		/*	Callback function that is fired after the ellipsis is added,
			receives two parameters: isTruncated(boolean), orgContent(string). */
		callback	: function( isTruncated, orgContent ) {},

		lastCharacter	: {

			/*	Remove these characters from the end of the truncated text. */
			remove		: [ ' ', ',', ';', '.', '!', '?' ],

			/*	Don't add an ellipsis if this array contains 
				the last character of the truncated text. */
			noEllipsis	: []
		}
	});
});
</pre>
			</div>

			<h2>Custom events</h2>
			<p>Need to update the ellipsis manually? Trigger the &quot;update&quot;-event.</p>
			<div class="code-txt">
<pre class="prettyprint lang-js linenums">
$(&quot;#button&quot;).click(function() {
	$(&quot;#wrapper&quot;).trigger(&quot;update&quot;);
});
</pre>
			</div>

			<p>Want to know if the text got truncated? Trigger the &quot;isTruncated&quot;-event.</p>
			<div class="code-txt">
<pre class="prettyprint lang-js linenums">
$(&quot;#button&quot;).click(function() {
	//	by using the return-value...
	var isTruncated = $(&quot;#wrapper&quot;).triggerHandler(&quot;isTruncated&quot;);
	if ( isTruncated ) {
		//	do something
	}
	
	//	...or by using the callback function
	$(&quot;#wrapper&quot;).trigger(&quot;isTruncated&quot;, function( isTruncated ) {
		if ( isTruncated ) {
			//	do something
		}
	});
});
</pre>
			</div>

			<p>Need the original content? Trigger the &quot;originalContent&quot;-event.</p>
			<div class="code-txt">
<pre class="prettyprint lang-js linenums">
$(&quot;#button&quot;).click(function() {
	//	by using the return-value...
	var content = $(&quot;#wrapper&quot;).triggerHandler(&quot;originalContent&quot;);
	$(&quot;#foo&quot;).append( content );
	
	//	...or by using the callback function
	$(&quot;#wrapper&quot;).trigger(&quot;originalContent&quot;, function( content ) {
		$(&quot;#foo&quot;).append( content );
	});
});
</pre>
			</div>

			<p>If you want to destroy the ellipsis, trigger the &quot;destroy&quot;-event.</p>
			<div class="code-txt">
<pre class="prettyprint lang-js linenums">
$(&quot;#button&quot;).click(function() {
	$(&quot;#wrapper&quot;).trigger(&quot;destroy&quot;);
});
</pre>
			</div>

			<p>Please note that all custom events have been namespaced to &quot;.dot&quot;, so to prevent interfering with other scripts, triggering an event would best be done like this:</p>
			<div class="code-txt">
<pre class="prettyprint lang-js linenums">
$(&quot;#wrapper&quot;).trigger(&quot;update.dot&quot;);
</pre>
			</div>

		</div>

		<div class="code-wrapper">
			<div id="js-1" class="code">
				<p>JavaScript:</p>
<pre class="prettyprint lang-js linenums">
$(document).ready(function() {
	$(&quot;.ellipsis&quot;).dotdotdot();
});
</pre>
			</div>
			<div id="js-2" class="code">
				<p>JavaScript:</p>
<pre class="prettyprint lang-js linenums">
$(document).ready(function() {
	$(&quot;.ellipsis&quot;).dotdotdot({
		after: &quot;a.readmore&quot;
	});
});
</pre>
			</div>
			<div id="js-3" class="code">
				<p>JavaScript:</p>
<pre class="prettyprint lang-js linenums">
$(document).ready(function() {
	$(&quot;.ellipsis&quot;).dotdotdot();
});
</pre>
			</div>
			<div id="js-4" class="code">
				<p>JavaScript:</p>
<pre class="prettyprint lang-js linenums">
$(document).ready(function() {
	$(&quot;.ellipsis&quot;).dotdotdot({
		watch: &quot;window&quot;
	});
});
</pre>
			</div>
			<div id="js-5" class="code">
				<p>JavaScript:</p>
<pre class="prettyprint lang-js linenums">
$('#dot5 .pathname').each(function() {
	var path = $(this).html().split( '/' );
	if ( path.length > 1 ) {
		var name = path.pop();
		$(this).html( path.join( '/' ) + '&lt;span class=&quot;filename&quot;&gt;/' + name + '&lt;/span&gt;' );
		$(this).dotdotdot({
			after: 'span.filename',
			wrap: 'letter'
		});						
	}
});
</pre>
			</div>
		</div>
	</body>
</html>